$shade-variants: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20,
  22, 24, 26, 28, 30, 35, 40, 42, 45, 48, 50, 60, 70, 80, 90;

:root {
  /**
   * primary
   */
  // primary - dark shades
  @each $shade in $shade-variants {
    --primary-dark-#{$shade}: hsl(
      var(--primary-h),
      var(--primary-s),
      calc(var(--primary-l) - #{$shade}%)
    );
  }
  // primary - light shades
  @each $shade in $shade-variants {
    --primary-light-#{$shade}: hsl(
      var(--primary-h),
      var(--primary-s),
      calc(var(--primary-l) + #{$shade}%)
    );
  }

  /**
   * secondary colors
   */
  // secondary - light shades
  @each $shade in $shade-variants {
    --secondary-light-#{$shade}: hsl(
      var(--secondary-h),
      var(--secondary-s),
      calc(var(--secondary-l) + #{$shade}%)
    );
  }

  /**
   * primary-grey colors
   */
  // primary-grey - dark shades
  @each $shade in 4, 5, 8, 10, 15, 20, 30, 35, 40 {
    --primary-grey-dark-#{$shade}: hsl(
      var(--primary-grey-h),
      var(--primary-grey-s),
      calc(var(--primary-grey-l) - #{$shade}%)
    );
  }
  // primary-grey - light shades
  @each $shade in 2, 3, 5, 6, 10 {
    --primary-grey-light-#{$shade}: hsl(
      var(--primary-grey-h),
      var(--primary-grey-s),
      calc(var(--primary-grey-l) + #{$shade}%)
    );
  }

  /**
   * danger colors
   */
  // danger - light shades
  @each $shade in 20, 24, 36, 40 {
    --danger-light-#{$shade}: hsl(
      var(--danger-h),
      var(--danger-s),
      calc(var(--danger-l) + #{$shade}%)
    );
  }

  /**
   * warning colors
   */
  // warning - light shades
  @each $shade in 20, 24, 32 {
    --warning-light-#{$shade}: hsl(
      var(--warning-h),
      var(--warning-s),
      calc(var(--warning-l) + #{$shade}%)
    );
  }

  /**
   * info colors
   */
  // info - shadow
  --info-shadow-from: hsla(var(--info-h), var(--info-s), var(--info-l), 0.42);
  --info-shadow-to: hsla(var(--info-h), var(--info-s), var(--info-l), 0.2);
  // info - light shades
  @each $shade in 20, 24, 45 {
    --info-light-#{$shade}: hsl(
      var(--info-h),
      var(--info-s),
      calc(var(--info-l) + #{$shade}%)
    );
  }

  /**
   * success colors
   */
  // success - light shades
  @each $shade in 20, 24, 40, 45, 48 {
    --success-light-#{$shade}: hsl(
      var(--success-h),
      var(--success-s),
      calc(var(--success-l) + #{$shade}%)
    );
  }

  /**
   * purple colors
   */
  // purple - light shades
  @each $shade in 36, 38 {
    --purple-light-#{$shade}: hsl(
      var(--purple-h),
      var(--purple-s),
      calc(var(--purple-l) + #{$shade}%)
    );
  }

  /**
   * blue colors
   */
  // blue - light shades
  @each $shade in 32, 34 {
    --blue-light-#{$shade}: hsl(
      var(--blue-h),
      var(--blue-s),
      calc(var(--blue-l) + #{$shade}%)
    );
  }

  /**
   * red colors
   */
  // red - light shades
  @each $shade in 38 {
    --red-light-#{$shade}: hsl(
      var(--red-h),
      var(--red-s),
      calc(var(--red-l) + #{$shade}%)
    );
  }

  /**
   * orange colors
   */
  // orange - shadow
  // orange - light shades
  @each $shade in 18, 20 {
    --orange-light-#{$shade}: hsl(
      var(--orange-h),
      var(--orange-s),
      calc(var(--orange-l) + #{$shade}%)
    );
  }

  /**
   * yellow colors
   */
  // yellow - light shades
  @each $shade in 8 {
    --yellow-dark-#{$shade}: hsl(
      var(--yellow-h),
      var(--yellow-s),
      calc(var(--yellow-l) - #{$shade}%)
    );
  }
  // yellow - light shades
  @each $shade in 22 {
    --yellow-light-#{$shade}: hsl(
      var(--yellow-h),
      var(--yellow-s),
      calc(var(--yellow-l) + #{$shade}%)
    );
  }

  /**
   * green colors
   */
  // green - light shades
  @each $shade in 15, 22, 23 {
    --green-light-#{$shade}: hsl(
      var(--green-h),
      var(--green-s),
      calc(var(--green-l) + #{$shade}%)
    );
  }

  /**
   * smoke-white colors
   */
  // smoke-white - dark shades
  @each $shade in 2, 8, 10, 16 {
    --smoke-white-dark-#{$shade}: hsl(
      var(--smoke-white-h),
      var(--smoke-white-s),
      calc(var(--smoke-white-l) - #{$shade}%)
    );
  }
  // smoke-white - light shades
  @each $shade in 2 {
    --smoke-white-light-#{$shade}: hsl(
      var(--smoke-white-h),
      var(--smoke-white-s),
      calc(var(--smoke-white-l) + #{$shade}%)
    );
  }

  /**
   * placeholder colors
   */
  // placeholder - dark shades
  @each $shade in 8 {
    --placeholder-dark-#{$shade}: hsl(
      var(--placeholder-h),
      var(--placeholder-s),
      calc(var(--placeholder-l) - #{$shade}%)
    );
  }
  // placeholder - light shades
  @each $shade in 10, 16 {
    --placeholder-light-#{$shade}: hsl(
      var(--placeholder-h),
      var(--placeholder-s),
      calc(var(--placeholder-l) + #{$shade}%)
    );
  }

  /**
   * muted-grey colors
   */
  // muted-grey - dark shades
  @each $shade in 25 {
    --muted-grey-dark-#{$shade}: hsl(
      var(--muted-grey-h),
      var(--muted-grey-s),
      calc(var(--muted-grey-l) - #{$shade}%)
    );
  }
  // muted-grey - light shades
  @each $shade in 14, 15 {
    --muted-grey-light-#{$shade}: hsl(
      var(--muted-grey-h),
      var(--muted-grey-s),
      calc(var(--muted-grey-l) + #{$shade}%)
    );
  }

  /**
   * fade-grey colors
   */
  // fade-grey - dark shades
  @each $shade in 2, 3, 4, 5, 6, 8 {
    --fade-grey-dark-#{$shade}: hsl(
      var(--fade-grey-h),
      var(--fade-grey-s),
      calc(var(--fade-grey-l) - #{$shade}%)
    );
  }
  // fade-grey - light shades
  @each $shade in 2, 3, 4, 5, 6 {
    --fade-grey-light-#{$shade}: hsl(
      var(--fade-grey-h),
      var(--fade-grey-s),
      calc(var(--fade-grey-l) + #{$shade}%)
    );
  }

  /**
   * widget-grey colors
   */
  // widget-grey - dark shades
  @each $shade in 1, 2, 3, 4, 8, 12 {
    --widget-grey-dark-#{$shade}: hsl(
      var(--widget-grey-h),
      var(--widget-grey-s),
      calc(var(--widget-grey-l) - #{$shade}%)
    );
  }
  // widget-grey - light shades
  @each $shade in 1 {
    --widget-grey-light-#{$shade}: hsl(
      var(--widget-grey-h),
      var(--widget-grey-s),
      calc(var(--widget-grey-l) + #{$shade}%)
    );
  }

  /**
   * dark-dark-text colors
   */
  // dark-dark-text - light shades
  @each $shade in 14 {
    --dark-dark-text-light-#{$shade}: hsl(
      var(--dark-dark-text-h),
      var(--dark-dark-text-s),
      calc(var(--dark-dark-text-l) + #{$shade}%)
    );
  }

  /**
   * dark-text colors
   */
  // dark-text - light shades
  @each $shade in 18, 25, 35 {
    --dark-text-light-#{$shade}: hsl(
      var(--dark-text-h),
      var(--dark-text-s),
      calc(var(--dark-text-l) + #{$shade}%)
    );
  }

  /**
   * light-text colors
   */
  // light-text - dark shades
  @each $shade in 2, 4, 5, 6, 8, 10, 12, 20, 22 {
    --light-text-dark-#{$shade}: hsl(
      var(--light-text-h),
      var(--light-text-s),
      calc(var(--light-text-l) - #{$shade}%)
    );
  }
  // light-text - light shades
  @each $shade in 2, 5, 6, 12, 15 {
    --light-text-light-#{$shade}: hsl(
      var(--light-text-h),
      var(--light-text-s),
      calc(var(--light-text-l) + #{$shade}%)
    );
  }

  /**
   * dark-sidebar colors
   */
  // dark-sidebar - dark shades
  @each $shade in 2, 3, 4, 5, 6, 10, 12 {
    --dark-sidebar-dark-#{$shade}: hsl(
      var(--dark-sidebar-h),
      var(--dark-sidebar-s),
      calc(var(--dark-sidebar-l) - #{$shade}%)
    );
  }
  // dark-sidebar - light shades
  @each $shade in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 15, 16, 18, 20, 22, 25,
    55
  {
    --dark-sidebar-light-#{$shade}: hsl(
      var(--dark-sidebar-h),
      var(--dark-sidebar-s),
      calc(var(--dark-sidebar-l) + #{$shade}%)
    );
  }

  /**
   * landing-xxx colors
   */
  // landing-xxx - dark shades
  @each $shade in 2 {
    --landing-xxx-dark-#{$shade}: hsl(
      var(--landing-xxx-h),
      var(--landing-xxx-s),
      calc(var(--landing-xxx-l) - #{$shade}%)
    );
  }
  // landing-xxx - light shades
  @each $shade in 2, 4, 6, 8, 12, 14, 18 {
    --landing-xxx-light-#{$shade}: hsl(
      var(--landing-xxx-h),
      var(--landing-xxx-s),
      calc(var(--landing-xxx-l) + #{$shade}%)
    );
  }

  /**
   * landing-yyy colors
   */
  // landing-yyy - dark shades
  @each $shade in 6, 12 {
    --landing-yyy-dark-#{$shade}: hsl(
      var(--landing-yyy-h),
      var(--landing-yyy-s),
      calc(var(--landing-yyy-l) - #{$shade}%)
    );
  }
  // landing-yyy - light shades
  @each $shade in 2, 4, 6, 8, 18 {
    --landing-yyy-light-#{$shade}: hsl(
      var(--landing-yyy-h),
      var(--landing-yyy-s),
      calc(var(--landing-yyy-l) + #{$shade}%)
    );
  }
}
